<template>
	<view class="savepadding">
		<uni-list>
			<view class="item" style="padding: 0" v-for="(item, index) in listData" :key="index">
				<u-form ref="uform" label-width="auto">
					<!-- 	<u-form-item label="选择保养项目" @click="pickerShowClick(index)" borderBottom>
						<u-input v-model="item.maintenanceItemName" inputAlign="right" disabled disabledColor="#ffffff"
							border="none"
							placeholder="请选择保养项目" type="select"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->
					<u-form-item label="选择保养项目" borderBottom>
						<u-input
							v-model="item.maintenanceItemName"
							inputAlign="right"
							disabledColor="#ffffff"
							border="none"
							placeholder="请选择保养项目"
							type="select"></u-input>
					</u-form-item>
					<u-form-item label="保养金额/元" borderBottom>
						<u-input
							v-model="item.maintenanceItemAmount"
							type="digit"
							inputAlign="right"
							border="none"
							placeholder="请输入保养金额"></u-input>
					</u-form-item>
				</u-form>

				<text v-if="index != 0" class="delete" @click="deletItem(index)">删除</text>
			</view>
			<view style="margin: 20rpx; padding-bottom: 130rpx">
				<!-- <button class="list-add" @click="addMaintenanceProgram">+添加保养项目</button> -->
				<button class="list-add" @click="addMaintain">+继续添加</button>
			</view>
		</uni-list>

		<!-- 		<u-modal :show="show" title="保养项目" showConfirmButton showCancelButton @confirm="collectionConfirm"
			@cancel="collectionCancel" confirmText="提交">
			<view class="slot-content">
				<u-form ref="uform" :model="dict" label-width="auto" :rules="rules">
					<u-form-item label="保养项目" prop="dictValue">
						<u-input v-model="dict.dictValue"  disabledColor="#ffffff" border="bottom"
							placeholder="请输入保养项目" type="text"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</u-modal> -->
		<view class="bottom">
			<button class="bottom-add" @click="save">保存</button>
		</view>

		<!-- 商业险种 -->
		<u-picker
			mode="selector"
			:show="pickerShow"
			:default-selector="[0]"
			:columns="maintainTypeList"
			keyName="value"
			@confirm="pickerConfim()"
			@cancel="pickerShow = false"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// show:false,
				currentIndex: 0,
				pickerShow: false,
				maintainTypeList: [],
				listData: [
					{
						maintenanceItemName: '',
						maintenanceItemAmount: '',
					},
				],
				// dict:{
				// 	businessType:'maintenanceType',
				// 	dictValue:null
				// }
			};
		},
		watch: {
			'$store.state.params.getCarCommon.maintenanceType'() {
				this.maintainTypeList = [this.$store.state.params.getCarCommon.maintenanceType];
			},
		},
		onLoad(options) {
			var data = JSON.parse(options.maintenanceTypeList); //字符串转对象
			if (data.length > 0) {
				this.listData = data;
			}
			this.maintainTypeList = [this.$store.state.params.getCarCommon.maintenanceType];
		},

		methods: {
			// collectionConfirm(){
			// 	// 添加保养项目
			// 	if(this.dict.dictValue&&this.dict.dictValue.length){
			// 		this.$u.api.addDictValue(this.dict).then(
			// 			res => {
			// 				this.getSystemDict()
			// 				this.collectionCancel()
			// 			}
			// 		);
			// 	}else{
			// 		this.$u.toast('请输入保养项目');
			// 	}
			// },
			getSystemDict() {
				this.$u.api.getCarCommon().then(res => {
					this.$store.commit('params/getCarCommon', res);
				});
			},
			// collectionCancel(){
			// 	// 添加保养项目取消
			// 	this.show = false;
			// 	this.dict.dictValue = null;
			// },
			// 添加保养项目
			// addMaintenanceProgram() {
			// 	this.show = true;
			// },
			pickerShowClick(index) {
				this.pickerShow = true;
				this.currentIndex = index;
			},

			pickerConfim(e) {
				this.pickerShow = false;

				// let obj = this.maintainTypeList[index];
				let currentItem = this.listData[this.currentIndex];
				currentItem.maintenanceItemName = e.value[0].value;
				// currentItem.commercialInsuranceCode = obj.code;
			},
			//添加新的保养类型
			addMaintain() {
				let obj = {
					maintenanceItemName: '',
					maintenanceItemAmount: '',
				};
				this.listData.push(obj);
			},

			deletItem(index) {
				this.listData.splice(index, 1);
			},

			//保存
			save() {
				//获取所有页面的栈实例列表
				let pages = getCurrentPages();
				//当前页面
				let nowPage = pages[pages.length - 1];
				//上个页面
				let prevPage = pages[pages.length - 2];
				//计算计算总费用
				console.log(str);
				var totalAmount = 0;

				this.listData = this.listData.filter(item => {
					return item.maintenanceItemName && item.maintenanceItemAmount;
				});
				for (let item of this.listData) {
					totalAmount += parseFloat(item.maintenanceItemAmount);
				}

				let str = '已添加' + this.listData.length.toString() + '项';
				prevPage.$vm.maintenanceTypeList = this.listData;
				prevPage.$vm.allAmount = totalAmount.toString();
				prevPage.$vm.maintenanceTypeStr = str;

				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss">
	.list-add {
		line-height: 88rpx;
		border-radius: 8rpx;
		background-color: rgba($color: #1573ff, $alpha: 0.26);
		color: #1573ff;
		margin-bottom: 12rpx;
	}

	.u-form {
		margin: 10px;
		padding: 22rpx;
		background-color: $xz-bgColor-write;
	}

	.delete {
		display: flex;
		color: $xz-textColor-red;
		font-size: 24rpx;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: $xz-textColor-FF;
	}

	.bottom-add {
		width: 90%;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: $xz-bgColor-blue;
		color: $xz-textColor-FF;
		font-size: 30rpx;
		margin: 11rpx;
	}
</style>
